


@keyframes on-show {
	0%{
		width: 0;
		height: 0;
		bottom: 0;
		border-radius: 0rpx;
	}
	
	100%{
		
		bottom: 50rpx;
		width: 150rpx;
		height: 20rpx;
		border-radius: 20rpx;
	}
}

@keyframes on-open {
	0%{
		
		width: 150rpx;
		height:20rpx;
		bottom: 50rpx;
		border-radius: 20rpx;
	}
	
	100%{
		width: 350rpx;
		height: 100rpx;
		bottom: 50rpx;
		border-radius: 40rpx;
	}
}

@keyframes on-close {
	0%{
		width: 350rpx;
		height: 100rpx;
		bottom: 50rpx;
		border-radius: 40rpx;
	}
	100%{
		width: 150rpx;
		height: 20rpx;
		bottom: 50rpx;
		border-radius: 20rpx;
	}
}

@keyframes item-in {
	0%{
		transform: translateX(400%) rotate(0deg);
		
	}
	100%{
		transform: translateX(0%) rotate(360deg);
		
	}
}

@keyframes item-out {
	0%{
		transform: translateX(0%) rotate(0deg);
		
	}
	100%{
		transform: translateX(400%) rotate(360deg);
		
	}
	
}
